import React, { createContext } from 'react'
import { useState, useEffect } from 'react'
import axios from 'axios';
import './index.scss'
import { Space, Button } from 'antd'
import type { ColumnsType } from 'antd/es/table';


import SearchForm from '@/components/Form/SearchForm';
import TableList from '@/components/TableList/TableList';
import EditDialog from './components/editDialog/EditDialog';

import { searchList, buttonList } from "./option"

import TypeApi from '../api/type';
import confirmDialog from '@/utils/confirmDialog';
const typeApi = new TypeApi();

interface DataType {
    key: React.Key;
    name: string,
    createTime: string
}


const PlanType: React.FC = () => {

    useEffect(() => {
        // console.log('lll')
    })
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            render: (text, record, index) => `${index + 1}`,
        },
        {
            title: '分类名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '操作',
            key: 'action',
            render: (_: any, record: any) => (
                <Space size="middle">
                    <a onClick={() => modifyType(record)}>编辑</a>
                    <a onClick={() => deleteType(record.id)} style={{ color: 'red' }}>删除</a>
                </Space>
            ),
        },
    ];

    // 列表数据
    const [data, setData] = useState<any>();
    const [dialogData, setDialogData] = useState({
        dialogVisible: false,
        title: '',
        data: {}
    })
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 10,
        total: 0
    })


    // 获取列表数据
    const getData = (value?: any) => {
        let params = {
            data: value,
            current: pagination.current,
            pageSize: pagination.pageSize
        }
        typeApi.typeList(params).then((res) => {
            if (res) {
                setData(res.data)
                let page = pagination
                page.total = res.totalCount
                setPagination(page)
            }

        })
    }
    // 点击筛选
    const onQuery = (values: any) => {
        getData(values)
    };
    // 重置
    const onReset = () => {
        getData()
    }
    // 新增
    const onAdd = () => {
        setDialogData({
            dialogVisible: true,
            title: '新增',
            data: {}
        })
    };
    //监听翻页数据变化
    const pageChange = (current: number, pageSize: number) => {
        let page = pagination
        page.current = current
        page.pageSize = pageSize
        setPagination(page)
        getData()
    }
    const currentChange = (current: number) => {
        let page = pagination
        page.current = current
        setPagination(page)
        getData()
    }

    // 删除分类
    const deleteType = (id: string) => {
        confirmDialog('确认删除?', () => {
            let list = data
            typeApi.deleteType(id).then((res: any) => {
                if (list) {
                    list = list.filter((item: any) => {
                        return item.id != id
                    })
                    setData(list)
                }
            })
        })
    }

    // 新增弹框-点击确定
    const submit = (value: any) => {
        getData()
        setDialogData({
            dialogVisible: false,
            title: '',
            data: {}
        })
    }

    // 编辑弹框
    const modifyType = (value: any) => {
        setDialogData({
            dialogVisible: true,
            title: '编辑',
            data: value
        })
    }

    // 副作用
    useEffect(() => {
        // 在这里请求数据
        getData()
    }, []);

    return (
        <div>
            {/* 搜素栏 */}
            <SearchForm searchList={searchList} buttonList={buttonList} onQuery={onQuery} onReset={onReset}>
                <Button type="primary" htmlType="button" onClick={onAdd} style={{ marginLeft: 20 }}>
                    新增
                </Button>
            </SearchForm>

            {/* 数据列表 */}
            <TableList columns={columns} initData={data} pagination={pagination} pageChange={pageChange} currentChange={currentChange}></TableList>

            {/* 新增编辑弹框 */}
            <EditDialog title={dialogData.title} initialValues={dialogData.data} dialogVisible={dialogData.dialogVisible} onSubmit={submit}></EditDialog>
        </div>
    )
}


export default PlanType